<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>props</title>
	</head>

	<body>
		<!-- 准备好一个“容器” -->
		<div id="test1"></div>
		<div id="test2"></div>
		<div id="test3"></div>
		<!-- 引入react核心库 -->
		<script
			type="text/javascript"
			src="../js/react.development.js"
		></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script
			type="text/javascript"
			src="../js/react-dom.development.js"
		></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
		<script type="text/babel">
			/* 此处一定要写babel */
			//1.创建组件
			class Person extends React.Component {
				render() {
					const { name, age, gender } = this.props
					return (
						<ul>
							<li>姓名:{name}</li>
							<li>性别:{gender}</li>
							<li>年龄:{age + 1}</li>
						</ul>
					)
				}
			}
			//2.渲染虚拟DOM到页面
			ReactDOM.render(
				<Person name="tom" age={18} gender="男" />,
				document.getElementById('test1')
			)
			ReactDOM.render(
				<Person name="merry" age={19} gender="女" />,
				document.getElementById('test2')
			)
			const p = {
				name: '老刘',
				age: 18,
				gender: '男',
			}
			ReactDOM.render(<Person {...p} />, document.getElementById('test3'))
		</script>
	</body>
</html>
